import React, { Component } from 'react';
// 导入css
import './comment.css'

class Comment extends Component {
  constructor() {
    super();
    this.state = {
      name: '',
      content: '',
      list: []
    }
  }
  getName(e) {
    this.setState({
      name: e.target.value
    })
  }
  getContent(e) {
    this.setState({
      content: e.target.value
    })
  }
  submit() {
    let arr = this.state.list;
    arr.push({
      name: this.state.name,
      content: this.state.content,
    })
    this.setState({
      list: arr
    })
    this.setState({
      name: '',
      content: ''
    })
  }
  del(index) {
    let arr = this.state.list;
    arr.splice(index, 1);
    this.setState({
      list: arr
    })
  }
  render() {
    return (
      <div>
        <input placeholder="请输入昵称" value={this.state.name} onChange={(e) => this.getName(e)}></input>
        <input placeholder="请输入内容" value={this.state.content} onChange={(e) => this.getContent(e)}></input>
        <button onClick={() => this.submit()}>提交</button>
        <hr />
        {
          this.state.list.map((item,index) => {
            return (
              <div key={item.name} className={index%2?'red':'blue'}>
                <p>昵称：{item.name}</p>
                <p>内容：{item.content}</p>
                <button onClick={()=>this.del(index)}>删除</button>
              </div>
            )
          })
        }
      </div>
    );
  }
}

export default Comment;
